<template>
	<div class="goods-operation">
		<!-- 步骤 -->
		<u-steps class="steps" mode="number" active-color="#333" :list="steps" :current="current"></u-steps>
		<u-gap bg-color="#f7f7f7"></u-gap>
		<!-- 第一步 选择分类 -->
		<step1 v-if="current == 0" @changed="changeOfStep1" />
		<step2 v-if="current == 1" :stepData="step1Data" />
		<step3 v-if="current == 2" />
	</div>
</template>

<script>
	import step1 from "@/pages/goods/step/step1";
	import step2 from "@/pages/goods/step/step2";
	import step3 from "@/pages/goods/step/step3";
	export default {
		components: {
			step1,
			step2,
			step3
		},
		data() {
			return {
				current: 0, //步骤的current
				steps: [{
						name: "选择商品品类"
					},
					{
						name: "填写商品详情"
					},
					{
						name: "商品发布成功"
					},
				],
				step1Data: {},
				selectedTemplate: "", //选择的模版信息
				
			};
		},
		onLoad(options){
			if(options.id){
				this.current = 1
				this.step1Data.id = options.id
			}
		},

		onShow() {
			// 选择的商品计量单位
			uni.$on('goodsUnit', res => {
				this.step1Data = {
					...this.step1Data,
					...{
						goodsUnit: res.name
					}
				}
				uni.$off('goodsUnit')
			})
			// 选择的商品模版
			uni.$on('selectedGoodsTemplate', res => {
				this.step1Data.tempId = res.id;
				this.current = 1
				uni.$off('selectedGoodsTemplate')
			})
			
		},


		methods: {
			// 第一步发布回调参数 
			changeOfStep1(val) {
				this.step1Data = val;
				this.current = 1
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goods-operation {
		padding: 32rpx 0;

		>.steps {
			padding-bottom: 32rpx;
		}
	}
</style>
